$def with (text, query, tap_endpoint, filepath, results) 
<!doctype html>

<html>

    <head>
        <title>TAP Web2.0 Archive Interface</title>
        <link rel="stylesheet" type="text/css" href="/static/style.css" />
        <link rel="stylesheet" type="text/css" href="/static/css/jquery.lightbox-0.5.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="/static/css/jquery-ui-1.8.16.custom.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/ColReorder.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/ColVis.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/demo_table_jui.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/TableTools.css" />		
	    <link href="/static/css/facebox.css" media="screen" rel="stylesheet" type="text/css"/>  
        <script type="text/javascript" src="/static/js/jquery.js"></script>
        <script type="text/javascript" src="/static/js/jquery.lightbox-0.5.js"></script>
		<script src="/static/js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> 
        <script type="text/javascript" src="/static/js/highcharts.js"></script>
   		<script src="/static/js/facebox.js" type="text/javascript"></script>         
        <script src="/static/js/jquery.dataTables.js" type="text/javascript"></script> 
		<script src="/static/js/ColReorder.js" type="text/javascript"></script> 
		<script src="/static/js/ColVis.js" type="text/javascript"></script>
		<script type="text/javascript" charset="utf-8" src="/static/js/ZeroClipboard.js"></script>
		<script type="text/javascript" charset="utf-8" src="/static/js/TableTools.js"></script> 
		<script src="/static/js/highstock.src.js" type="text/javascript"></script>
		<script type="text/javascript" src="/static/js/themes/grid.js"></script>
        <script src="/static/menu.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="/static/menu.css" />		
        
		
        <!-- <script type="text/javascript" src="/static/js/adapters/mootools-adapter.js"></script> -->		
		
			
        <script type="text/javascript">			
			
	      var flatten = function(arr){
	            var flatten = arguments.callee; // reference to self, in case top-level var name is changed
	            return arr.reduce(function(acc, val){
	                return acc.concat(val.constructor === Array ? flatten(val) : val);
	            },[]);
	      };        
        
          jQuery(document).ready(function(){
                  	  
       	    jQuery('#interactive').live('click',function(){ 
				jQuery('#mode_notify').html('interactive').hide().fadeIn('slow');
       	    });  
			
       	 
       	    jQuery('#static').live('click',function(){ 
    			jQuery('#mode_notify').html('static').hide().fadeIn('slow');
       	    }); 
       	    
       	    
       	    jQuery('#plot_type').live('change',function(){ 
				if (jQuery(this).val()== "Histogram"){
					jQuery("#y_axis").attr("disabled", "disabled");
					jQuery("#y_alias").attr("disabled", "disabled");
					jQuery('#bins_container').fadeIn('fast');
				} else {
					jQuery('#bins_container').fadeOut('fast');
					jQuery("#y_axis").attr("disabled", "");
					jQuery("#y_alias").attr("disabled", "");					
				}
				
       	    });  
      	    
       		jQuery('a[rel*=facebox]').facebox();  
        	
       		try {
	       	    json_array = $:text;
	       	    if (json_array!=0) {
					jQuery('#load').hide();
		     		jQuery('#results').hide();
					jQuery('#results').html('');
					var result_data = jQuery('input[name=results]').val();
					var pathname = jQuery('#filepath').val();
		      		jQuery('#results').append('<span style="font-size:13px;font-style:italic;padding-bottom:52px;">The following table contains the results of your initial query</span><table cellpadding="0" cellspacing="0" border="0" class="datatables" id="votable"></table>' ).fadeIn(1500);                            	
		
		      		var col = [];
		            for (i=0;i<json_array.length;i++) {
		            	col.push({"sTitle" : json_array[i]});
		            }
	
		            if (result_data!=null && result_data!="" && result_data!='None' && result_data.length>0){
		        		result_data = jQuery.parseJSON(result_data);
		    			var oTable = jQuery('#votable').dataTable( {
			            	"bJQueryUI" : true,
			        		"sPaginationType": "full_numbers",
			        		"sDom" : 'T<"clear">R<"H"Clfr>t<"F"ip>',
			        		"bProcessing" : true,
			        		//"bServerSide" : true,
			        		//"aaData":result_array[1], 
			        		"aaData" : result_data,
			        		"aoColumns" : col,					                        		
			        		//"bScrollCollapse": true,
			        		"bAutoWidth": false,
			        		"sScrollX": "100%",
			        		"sSwfPath" : "media/swf/copy_cvs_xls.swf"
			            });
			            jQuery('#results').fadeIn('slow');

		    		 } else {
			            var oTable = jQuery('#votable').dataTable( {
			            	"bJQueryUI" : true,
			        		"sPaginationType": "full_numbers",
			        		"sDom" : 'T<"clear">R<"H"Clfr>t<"F"ip>',
			        		"bProcessing" : true,
			        		"bServerSide" : true,
			        		//"aaData":result_array[1], 
			        		"aoColumns" : col,					                        		
			        		//"bScrollCollapse": true,
			        		"bAutoWidth": false,
			        		"sScrollX": "100%",
			        		"sSwfPath" : "media/swf/copy_cvs_xls.swf",
							"sAjaxSource" : '/data_tables_processing',
							"fnServerData" : function ( sSource, aaData, fnCallback ) {
											  aaData.push({'name' : 'pathname', 'value' : pathname});
											  jQuery.ajax({
								           		 "dataType": 'json',
								                 "type": "POST",
								                 "url": sSource,
								                 "data": aaData, 
							                     timeout: 1000000,
							                     "error": function(){
							 		          		if (!error_bool){ 																					
								                    	error_bool = true;
							                    	 	jQuery('#error').html("Query returned invalid data.. Please try another query");
								        					jQuery('#error').fadeIn('normal');
								        					jQuery('#error').delay(3800).fadeOut('slow');   
								 		          	}		
							 		          	},
								                 "success": function(data){
								                		if (data==null){
												          	if (!error_bool){ 
								                		 		error_bool = true;
													          	jQuery('#error').html("Query returned invalid data.. Please try another query");
			   					        						jQuery('#error').fadeIn('normal');
			   					        						jQuery('#error').delay(3800).fadeOut('slow');   
												          	}
												        } else {
									                    	error_bool = false;
												          	fnCallback(data);															                	 
									             		    jQuery('#results').fadeIn('slow');
									               	}
								                 }
								              }); //end ajax call
											 
							 } //end fnServerData function	            
			
			            } ); //end oTable

		            }
			        oTable.fnAdjustColumnSizing(true);                       
		          
	       	    }
       		} catch (ex){
       			console.log(ex);
       			alert ('There was an error processing you request');
       		}
            //Axis Form submission, fetch input, validate, and send POST request to server
            //POST request should return a new data table with two columns, based on the axis expression
        	
           jQuery('#axis_input_form').each(function() {
              jQuery(this).submit(function(){
                    
            	jQuery('#load').hide();
                jQuery('#load').show();
            	jQuery('#container').slideUp('slow');

            	var x_axis = jQuery("input#x_axis").val();
        		var y_axis = jQuery("input#y_axis").val();
            	var x_alias = jQuery("input#x_alias").val();
        		var y_alias = jQuery("input#y_alias").val();
        		var query = jQuery("input#query").val();
        		var tap_endpoint = jQuery("input#tap_endpoint").val();
				var selected_mode = jQuery("#mode_notify").html();
	        	var plot_type = jQuery("#plot_type").val();
	        	var bins = jQuery("#bins").val();

				var contin_test = true;
	    		jQuery('#viewer_table_div').fadeOut('fast');
        		if (plot_type=="Scatter"){
		    		if (x_axis =='' || y_axis ==''){
	    	    		jQuery('#load').hide();
	        			jQuery('#error').html("Please enter the X and Y axis");
						jQuery('#error').fadeIn('normal');
						jQuery('#error').delay(3800).fadeOut('slow');
		     			contin_test = false;
		    		} else if (x_alias =='' || y_alias ==''){
	        			jQuery('#load').hide();
	        			jQuery('#error').html("Please enter the X and Y labels");
						jQuery('#error').fadeIn('normal');
						jQuery('#error').delay(3800).fadeOut('slow');
						contin_test = false;	
	        		} 
		    		
        		} else {
        			if (x_axis ==''){
	    	    		jQuery('#load').hide();
	        			jQuery('#error').html("Please enter the X axis");
						jQuery('#error').fadeIn('normal');
						jQuery('#error').delay(3800).fadeOut('slow');
		     			contin_test = false;
		    		} else if (x_alias =='' ){
	        			jQuery('#load').hide();
	        			jQuery('#error').html("Please enter the X label");
						jQuery('#error').fadeIn('normal');
						jQuery('#error').delay(3800).fadeOut('slow');
						contin_test = false;	
	        		}
        			
        		}
		    	
        		if (contin_test) {	
        		
        			var xhr = jQuery.ajax({
                        type: "POST",
                        data: {xaxis : x_axis,yaxis : y_axis,query : query, tap_endpoint : tap_endpoint, x_alias : x_alias, y_alias : y_alias, mode : selected_mode, plot_type : plot_type, bins : bins},
                        timeout: 1000000,
                        error: function() {
                        	jQuery('#load').hide();	
                        	alert('There was an error processing your request');
                        },
                        success: function(data) {
                			jQuery('#load').hide();   
                			if (data!="<div style=\"color:red;margin-left:50px;font-size:12px\">Please enter correct column expressions</div>"){	                   
                	     		jQuery('#viewer_table_div').hide();	
                				jQuery('#viewer_table_div').html('');
                				jQuery('#viewer_table_div').html('<div style="padding: 10px;margin-top:20px;float:left;"><span style="font-size: 13px; font-style: italic; padding-bottom: 52px;">Table of user-generated plot points</span>');
    							jQuery('#viewer_table_div').append('<table cellpadding="0" cellspacing="0" border="0" class="datatables" id ="viewer_tbl"></table>' ).fadeIn(1500);                            		                            
    							try {
	                            	var data_array = []
	                            	data_array = jQuery.parseJSON(data);
	                            } catch (ex) { 
		                     		jQuery('#error').html("Query returned invalid data.. Please try another query");
		        					jQuery('#error').fadeIn('normal');
		        					jQuery('#error').delay(3800).fadeOut('slow');        
		        					result_array = "error";
	                            }

	                            if (data_array!="error" && data_array != []){		
						            		       	
	                            		var col2 = [];
		                	            for (i=0;i<data_array[0].length;i++) {
		                	            	col2.push({"sTitle" : data_array[0][i]});		                	            
		                	            }
		                	         
		                	            var oTable = jQuery('#viewer_tbl').dataTable( {
		                	        		"bJQueryUI": true,
		                	        		"sPaginationType": "full_numbers",
		                	        		"sScrollX": "100%",
		                	        		"sDom": 'T<"clear">R<"H"Clfr>t<"F"ip>',
		                	        		"bProcessing": true,
		                	        		"sSwfPath" : "media/swf/copy_cvs_xls.swf",
		                	        		"aaData":data_array[1],           
		                	        		"aoColumns": col2,
		                	        
		                	             } );	

								
		                	            jQuery('#viewer_table_div').fadeIn('slow');	 
		                
		                	            
		                	            if (selected_mode == "interactive"){
		                	            	if (plot_type=="Scatter"){
				                	            
		                	            		Highcharts.setOptions({
				                	                lang: {
				                	                    resetZoom: ''
				                	                }
				                	            });
				                	            
				                	            options = {
				                	            		chart: {
				                	    	                renderTo: 'container',
				                	    	                defaultSeriesType: 'scatter',
				                	    	            	backgroundColor:'#FFFFFF',
				                	    	            	borderWidth:3,
				                	    	            	borderColor:'#AFC7C7',
				                	    	              	resetZoomEnabled: true,
				                	    	         		marginLeft:90,
				                	    	         		marginRight:60,
				                	    	                events: {
				                	    	                    load: function(chart) {
				                	    	                        this.setTitle(null, {
				                	    	                            text: 'Interactive Data plot'
				                	    	                        });
				                	    	                    }
				                	    	                },
				                	    	                zoomType: 'xy'
				                	    	            },
				
				                	    	            xAxis: {
				                	    	            	title: {
				                	    	                    text: x_alias
				                	    	                },
				                	    	            	type: 'linear',
				                	    	            	labels: {
				                	    	                    formatter: function() {	
				                	    	                    	function getRepString2 (rep) {
				                	    	                    		  rep = rep+''; // coerce to string
				                	    	                    		  if (Math.abs(rep) < 1000000) {
				                	    	                    		    return rep; // return the same number  
				                	    	                    		  } else if (Math.abs(rep) < 1000000000){
				                	    	                    			  return (rep/1000000).toFixed(rep % 1000000 != 0)+'x10^6';
				                	    	                    		  } else if (Math.abs(rep) < 1000000000000){	  
				                	    	                    			  return (rep/1000000000).toFixed(rep % 1000000000 != 0)+'x10^9';
				                	    	                    		  } else {	  
				                	    	                    			  return (rep/1000000000000).toFixed(rep % 1000000000000 != 0)+'x10^12';
				                	    	                    		  }
				                	    	                    		 
				                	    	                    		}
				                	    	                    	return getRepString2(this.value);
				                	    	                    }
				                	    	                }, 
				                	    	                
				                	    	                events: {
				                	    	                    setExtremes: function(e){
				                	    	                       this.resetZoom.show();
				                	    	                    }
				                	    	                }
				
				                	    	            },
				
				                	    	            yAxis: {	
				                	    	                title: {
				                	    	                    text: y_alias
				                	    	                },
				                	    	                labels: {
				                	    	                    formatter: function() {
				
				                	    	                    	function getRepString (rep) {
				                	    	                    		  rep = rep+''; // coerce to string
				                	    	                    		  if (Math.abs(rep) < 1000000) {
					                	    	                    		    return rep; // return the same number  
					                	    	                    		  } else if (Math.abs(rep) < 1000000000){
					                	    	                    			  return (rep/1000000).toFixed(rep % 1000000 != 0)+'x10^6';
					                	    	                    		  } else if (Math.abs(rep) < 1000000000000){	  
					                	    	                    			  return (rep/1000000000).toFixed(rep % 1000000000 != 0)+'x10^9';
					                	    	                    		  } else {	  
					                	    	                    			  return (rep/1000000000000).toFixed(rep % 1000000000000 != 0)+'x10^12';
					                	    	                    		  }
				                	    	                    		}
														
				                	    	                    	return getRepString(this.value);
				                	    	                    }
				                	    	                },
				                	    	                events: {
				                	    	                    setExtremes: function(e){
				                	    	                       this.resetZoom.show();
				                	    	                   }
				                	    	               }
				
				                	    	            },
				                	    	            navigator: {
				                	    	            	enabled: true,
				                	    	                height: 40,
				                	    	                xAxis: {
				                	    	                	      labels : {
				                	    	                	         formatter: function() {
				                	    	                	            return this.value;
				                	    	                	         }
				                	    	                	      },
				                	    	                	      type : 'linear'
				                	    	                },
				                	    	                maskFill: 'rgba(170, 150, 170, 0.75)',
				                	    	                series: {
				                	    	                    type: 'scatter',
				                	    	                    color: 'rgba(223, 83, 83, .5)',
				                	    	                    radius: 2,
				                	    	                    lineWidth: 0,
				                	    	                    marker: {
				                	    	                        enabled: true,
				                	    	                        symbol: 'circle',
				                	    	                        radius: 1
				                	    	                    }
				                	    	                }
				                	    	            },
				                       					title: {
				                    						text: x_axis + '  x  ' + y_axis
				                    					},
				                    					subtitle: {
				                    						text: 'Table-Viewer dynamic graph'
				                    					},
				                    					rangeSelector: {
				                	    	            	enabled:false
				                	    				},
				                	    	            plotOptions: {
				                	    	                scatter: {
				                	    	                    marker: {
				                	    	                        radius: 2,
				                	    	                        states: {
				                	    	                            hover: {
				                	    	                                enabled: false,
				                	    	                                lineColor: 'rgb(100,100,100)'
				                	    	                            }
				                	    	                        }
				                	    	                    },
				                	    	                    states: {
				                	    	                        hover: {
				                	    	                            marker: {
				                	    	                                enabled: false
				                	    	                            }
				                	    	                        }
				                	    	                    }
				                	    	                },
				                    						series: {
				    	                						allowPointSelect: true,
				    	                						point: {
				    		                						events: {
				    			                						click: function() {
				    		                								 	 var x = this.x;
				    		                								 	 var y = this.y;
				    				                							 jQuery("#viewer_table tr").each(function(i, v){				
				    				                									if (i>0) {
				    				                									 	var values = Array();
				    				                										var count =0;
				    				                										jQuery(this).children('td').each(function(ii, vv){	
				    				                											if (ii>0){
				    				                											    values[count] = parseFloat(this.innerHTML);
				    				                												count=count+1;
				    				                											}
				    				                										});
				    				                										
				    				                										if((x==values[0])&&(y==values[1])){
				    				                								 			
				    				                							 				var row_id = i;
				    				                							 				 jQuery("#votable tr").each(function(iii, v){	
				    				                							 				 	if (row_id==iii){
				    				                							 				 		jQuery(this).addClass("rowHover"); 		
				    				                							 				 	} else {
				    									                								jQuery(this).removeClass("rowHover");
				    				                							 				 	}
				    				                							 				 });
				    				                										}
				    				                										
				    				                									}			
				    				                							 });
				    		                						
				    			                						}
				    		                						}
				    	                						}
				                    						}
				                	    	            },
				                	    	            
				                	    	            scrollbar: {
				                	    	            	enabled : true,
				                	    	                barBackgroundColor: 'gray',
				                	    	                barBorderRadius: 7,
				                	    	                barBorderWidth: 0,
				                	    	                buttonBackgroundColor: 'gray',
				                	    	                buttonBorderWidth: 1,
				                	    	                buttonBorderRadius: 7,
				                	    	                trackBackgroundColor: 'none',
				                	    	                trackBorderWidth: 1,
				                	    	                trackBorderRadius: 8,
				                	    	                trackBorderColor: '#CCC'
				                	    	            },
				                	    	            series : [{ 
				                   	    						name: x_alias + " x " + y_alias,
				                   	    						color: 'rgba(119, 152, 191, .4)',
				                   	    						data: data_array[1],
				                   	    						marker: {
				                   	    		                	symbol: 'square'
				                   	    		            	},
				                   	    					    enableMouseTracking: false,
				                   	    	    	           	dataGrouping: {
				                   	    	    	                  groupPixelWidth: 20
				                   	    	    	           }  
				                   	    	    	        }]
				                	            }

				                	    
												var chart = new Highcharts.Chart(options);
			                	            
				                	            
				               	                chart.yAxis[0].resetZoom = chart.xAxis[0].resetZoom = jQuery('<button id="button" style="text-decoration:none;font-family:Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:black;fill:black;">Reset zoom</button>')
				                	                    .appendTo(chart.container)
				                	                    .css({
				                	                        position: 'absolute',
				                	                        top: 70,
				                	                        right: 70,
				                	                        display: 'none'
				                	                    })
				                	                    .click(function(){
				                	                        //var extremesX = chart.xAxis[0].getExtremes();
				                	          	        	//var extremesY = chart.yAxis[0].getExtremes();
				                	                   		chart.xAxis[0].setExtremes(null,null,true,false);
				                	          	         	chart.yAxis[0].setExtremes(null, null,true,false);
				                	                        this.style.display = 'none';
				                	                    });
		                	    
		                	            	
		                	            	} else {   // Histogram option was selected
          	
		                	            		var chart;
		                	                    chart = new Highcharts.Chart({
		                	                        chart: {
		                	                            renderTo: 'container',
		                	                            defaultSeriesType: 'column',
		                	                        	marginLeft:90,
			                	    	         		marginRight:60,
		                	                            backgroundColor:'#FFFFFF',
			                	    	            	borderWidth:3,
			                	    	            	resetZoomEnabled: true,
			                	    	            	borderColor:'#AFC7C7',
			                	    	                zoomType: 'x'
			                	    	            },
		                	                        credits:{
		                	                            enabled:false
		                	                        },
		                	                        xAxis: {
			                	    	            	title: {
			                	    	                    text: x_alias
			                	    	                }
		                	                        },
		                	                        yAxis: {
			                	    	            	title: {
			                	    	                    text: "Frequency"
			                	    	                }
		                	                        },
		                	                        title: {
		                	                            text: 'Table-viewer Interactive Histogram Plot',
		                	                        },
		                	                        legend: {
		                	                            enabled:false
		                	                        },
		                	                        series: [{
		                	                        	name: "Frequency",
		                	                            data: data_array[2]
		                	                        }]
		                	                    }); 	

		                	            	
		                	            	}
			
		                	            } else {
		                	            	if (data_array.length>2){
		                	 					var div_content = '<div style="border: 2px solid #AFC7C7;margin:0 auto; text-align:center;margin-bottom:20px;overflow:auto;max-height:800px;padding-top:10px;clear:both;padding-bottom:10px;">' + data_array[2][0] + '</div>';
		                	            		jQuery('#container').html(div_content).hide().fadeIn('slow');		                	            
		                	            	   }
	                         		    	}               
	                            		}
	                            	jQuery('#container').slideDown('slow');
		               						
	                            
                			} else {
                				jQuery('#error').html("There was an error processing your request. Please check your input for valid expressions (Label names must contain characters and numbers only)");
	        					jQuery('#error').fadeIn('normal');
	        					jQuery('#error').delay(3800).fadeOut('slow');                				
                			}
                        }
                    });

        		} 
        		return false;
        	
       		 });
    	
           });
        });

		
		
		</script>
			    
        <link rel="icon" 
      	            type="image/png" 

                              href="/static/icon2.png">
    
    <!--[if lt IE 7]>
		<style type="text/css">
   		.dock img { behavior: url(iepngfix.htc) }
   		</style>
	<![endif]–>
    
                              
	<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="/static/styleIE.css" />
			<style type="text/css" media="screen">
				#header div{
					background-image: none;
					filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='overlay.png', sizingMethod='scale');
				}
			</style>
	<![endif]-->
	<!--[if lte IE 6]>
			<style type="text/css" media="screen">
				#header div{
					background-image: none;
					filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='overlay.png', sizingMethod='scale');
				}
			</style>
	<![endif]-->
    
    
    
    
    </head>
    
    <body>
	

	<div id="menu" style="position:absolute;top:13px;z-index:10;margin-left:10px">
		<ul class="menu">
			<li><a href="#"><span>Select Mode</span></a>
				<div id="submenu"><ul>
					<li><a href="#" id="interactive"><span>Interactive</span></a></li>
					<li><a href="#" id="static"><span>Static</span></a></li>					
				</ul></div>
			</li>
		</ul>
		
	</div>
	

	<div id="viewer_header"> 
		<div style="float:left;position:absolute;top:20px;margin-left:130px;"> <a href="#help" rel="facebox" style="color:gray;text-decoration:none;">Help</a></div> 	
		<h3>Table Viewer </h3>	<div id="mode_notify" style="font-size:12px;font-style:italic">interactive</div>
	</div>	
	<div id="gradient"></div>


	<div id="axis_input">
		<div id="post-it-example">
			<div style="width:280px;height:200px;padding-left:50px;padding-top:40px;">
			 <p>Enter an expression for the X & Y axis.</p><small>(Can be any mathematical expression,
			 formed using the column names)</small><br>
			  <br><div style="margin-left:55px;"><b>Example:</b><br>
			   X-Axis: yCorMag-xCorMag<br>
			   Y-Axis: ra
			     </div>
		    </div>
		</div><br>
		
		<span>Please enter a X and Y axis for the plot:</span>
		<div style="width:350px;height:110px;display:block"><br>
			<form method="post" id="axis_input_form">
				 
				<label for="x-axis">X-Axis Expression:</label> <input name="x_axis" type="text" id="x_axis"/><br>
				<label for="x_alias">X-Axis Label:</label> <input name="x_alias" type="text" id="x_alias"/><br>
				<label for="y-axis">Y-Axis Expression:</label><input name="y_axis" type="text" id="y_axis"/><br>
				<label for="y_alias">Y-Axis Label:</label><input name="y_alias" type="text" id="y_alias"/>
			    <input type="hidden" style="display:none" name="query" id="query"  $:query />
   			    <input type="hidden" style="display:none" name="filepath" id="filepath"  $:filepath />
   			    <input type="hidden" style="display:none" name="tap_endpoint" id="tap_endpoint"  $:tap_endpoint />
   			    <input type="hidden" style="display:none" name="results" $:results />		    
				<label for="plot_type">Plot type:</label> 
				<select name="plot_type" id="plot_type" style="margin-top:5px;margin-left:10px;">
				  <option value="Scatter">Scatter</option>
				  <option value="Histogram">Histogram</option>
				</select><br>
				
				
				<div id="bins_container" style="width:230px;display:none;float:left">
					<label for="bins">Bins:</label> 
					<select name="bins" id="bins" style="margin-top:5px;margin-left:10px;">
					  <option value="10">10</option>
					  <option value="20">20</option>
					  <option value="50">50</option>
					  <option value="100">100</option>
					</select>
				</div>
				<input type="submit" value="Submit" class="submit" />
				
			</form>
		</div>
	</div>
    
    <div id="container" style="width:900px;min-height:600px; margin: 0 auto;display:none;margin-bottom:5px"></div>
    <br>

    
   	<div id="load"> </div>
    
    <div id="error"></div>
    <br>       
	<div id="results">
		<br>
		
	</div>

	
    <br><br>
       
   <div id="viewer_table_div">
   </div>
   
    <br><br>
    <br>
	
	<div id="help" style="display:none;font-size:13px;">
		<h5>
		Help:
		</h5>
		<br><br>
		<p  style="font-size:12px;">
		<b>Interactive mode:</b> An interactive plot will be generated, where you can zoom in and out, in a dynamic way.<br>
		Not recommended for very large data sets (e.g. > 1,000,000 rows), as the web browser will be slow responding to your requests.

		<br><br>
		<b>Static mode:</b> A static plot will be generated, which is a non-interactive png image. Use if interactive mode is unable to handle
		the amount of data you require to have plotted.
		<br><br><br><br>
		</p>
	
	</div>
	
	<div style="visibility: hidden">
	 <br />
	 <a href="http://apycom.com/">link</a><br />
	</div>
    
    </body>

</html>
